<template>
  <h5>
    购物车(<span>{{ num }}</span
    >)
  </h5>
  <i>编辑</i>

  <!-- 购物车列表 -->
  <div v-if="num == 0">
    <van-empty description="您的购物车是空的" />
  </div>
  <ul v-else class="shopping-list">
    <div><van-checkbox v-model="checked"> 平台配送</van-checkbox></div>
    <li v-for="item in shoppingList" :key="item.cartId">
      <van-checkbox v-model="checked" />
      <van-card
        :num="item.count"
        :price="item.productPrice"
        :desc="item.standard"
        :itle="item.productName"
        :thumb="item.productImg"
      />
    </li>
  </ul>

  <van-submit-bar
    :price="0"
    button-text="提交订单"
    @submit="onSubmit"
    button-color="rgb(241,105,17)"
  >
    <van-checkbox v-model="checked">全选</van-checkbox>
  </van-submit-bar>
</template>

<script>
import { shoppingApi } from "../../../utils/api";
import { onMounted, ref } from "vue";
export default {
  setup() {
    const num = ref(1);
    const shoppingList = [];
    onMounted(() => {
      getshoppingList();
    });
    async function getshoppingList() {
      const token = localStorage.getItem("token");
      console.log(shoppingApi({ token: token }));
      let { result } = await shoppingApi();
      shoppingList.vaule = result;
      console.log(shoppingList);
    }
    return {
      num,
      checked: 0,
      getshoppingList,
    };
  },
};
</script>

<style lang="less" scoped>
h5 {
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
}
i {
  display: block;
  font-size: 14px;
  color: orange;
  float: right;
  margin: 8px 10px;
}
.van-submit-bar {
  position: fixed !important;
  bottom: 51px !important;
  left: 0 !important;
  border-top: 1px solid #ccc;
  border-radius: 0;
}
.van-empty {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.van-checkbox {
  margin-left: 10px;
}
.shopping-list {
  margin-top: 30px;
  background-color: #fff;
  > div:first-child {
    width: 100%;
    border-bottom: 1px solid #ccc;
    height: 40px;
    font-size: 14px;
    display: flex;
    align-items: center;
  }
  > li {
    display: flex;
    background-color: rgb(250, 250, 250);
    > .van-card {
      flex: 1;
    }
  }
}
</style>
